<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = [
      { 'id': '2a', 'pid': '', 'name': '总裁办' },
      { 'id': '2c', 'pid': '', 'name': '财务部' },
      { 'id': '2d', 'pid': '2c', 'name': '财务核算部' },
      { 'id': '2f', 'pid': '2c', 'name': '薪资管理部' },
      { 'id': 'd2', 'pid': '', 'name': '技术部' },
      { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部' }
    ]
    // 1. 遍历数组,给遍历出来的每一个对象添加一个children属性,值为空数组
    // 2. 遍历数组,创建一个空对象,将遍历出来每一个对象id作为键,值是当前对象,形成映射对象,目的是为了通过id找到对应的对象
    const map = {}
    arr.forEach(item => {
      if (!item.children) {
        item.children = []
      }
      map[item.id] = item
    })
    console.log(arr, 'arr');
    console.log(map, 'map');
    // 3.继续遍历数据,根据item中pid去映射对象中找到对应的父级
    // 4.创建一个新数组,保存最终的结果
    const new_arr = []
    arr.forEach(item => {
      const parent = map[item.pid]
      if (parent) {
        // 如果能在map对象中获取父级对象,此时说明item是二级数据
        parent.children.push(item)
      } else {
        // parent=undefind item ===> 一级数据
        new_arr.push(item)
      }

    })
    console.log(new_arr,'new_arr');

    // 函数版
    function tranListToTreeList(){
      // 1. 遍历数组,给遍历出来的每一个对象添加一个children属性,值为空数组
    // 2. 遍历数组,创建一个空对象,将遍历出来每一个对象id作为键,值是当前对象,形成映射对象,目的是为了通过id找到对应的对象
    const map = {arr}
    arr.forEach(item => {
      if (!item.children) {
        item.children = []
      }
      map[item.id] = item
    })
    console.log(arr, 'arr');
    console.log(map, 'map');
    // 3.继续遍历数据,根据item中pid去映射对象中找到对应的父级
    // 4.创建一个新数组,保存最终的结果
    const new_arr = []
    arr.forEach(item => {
      const parent = map[item.pid]
      if (parent) {
        // 如果能在map对象中获取父级对象,此时说明item是二级数据
        parent.children.push(item)
      } else {
        // parent=undefind item ===> 一级数据
        new_arr.push(item)
      }

    })
    // console.log(new_arr,'new_arr');
    return new_arr
    }
    tranListToTreeList(arr)
  </script>
</body>

</html>
